<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="root" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>菜单管理</title>
		<link href="${root}/static/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href="${root}/static/css/treeview.min.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="${root}/static/js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="${root}/static/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/treeview.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/vue.min.js"></script>
		<script type="text/javascript" src="${root}/static/js/axios.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var url = "${root}/menu/list";
				$.ajax({
					async: false,
					type: "get",
					data: {},
					dataType: "json",
					url: url,
					success: function(res) {
						$("#tree").treeview({
							data: res,
							showCheckbox: true
						});
					},
					error: function() {
						alert('网络延时 请重试');
					}
				});
				$("#tree").on("nodeChecked", function(event, node) {
					checkAllSon(node);
				});
				$("#tree").on("nodeUnchecked", function(event, node) {
					unCheckAllSon(node);
				});
				//选择所有子节点
				function checkAllSon(node) {
					if (node.nodes == null || node.nodes.length == 0) {
						return;
					}
					var arr = node.nodes;
					for (var i in arr) {
						$('#tree').treeview('checkNode', [arr[i].nodeId, {
							silent: true
						}]);
						//递归
						checkAllSon(arr[i]);
					}
				}
				//取消所有子节点
				function unCheckAllSon(node) {
					if (node.nodes == null || node.nodes.length == 0) {
						return;
					}
					var arr = node.nodes;
					for (var i in arr) {
						$('#tree').treeview('uncheckNode', [arr[i].nodeId, {
							silent: true
						}]);
						//递归
						unCheckAllSon(arr[i]);
					}
				}
			});
		</script>
	</head>
	<body>
		<div id="app" class="container-fluid">
			<table class="table">
				<caption>角色列表</caption>
				<thead>
					<tr>
						<th>编号</th>
						<th>角色名</th>
						<th>角色中文名</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="role in roles">
						<td>{{role.reid}}</td>
						<td>{{role.rename}}</td>
						<td>{{role.renamezh}}</td>
						<td><a @click.prevent="manage(role.reid)"><button class="btn btn-info">管理</button></a></td>
					</tr>
				</tbody>
			</table>
			<div id="mymodal" class="modal">
				<div class="modal-dialog" data-backdrop="static">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">&times;</button>
							<h4 id="title">{{title}}</h4>
						</div>
						<div class="modal-body treeview" id="tree"></div>
						<div class="modal-footer">
							<button class="btn btn-info glyphicon glyphicon-ok" @click="ok()">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					title: '角色菜单关联',
					roles: {},
					reid: 0
				},
				methods: {
					manage: function(reid) {
						var self = this;
						self.reid = reid;
						var url = "${root}/role/menus?id=" + reid;
						axios.get(url).then(
							function(res) {
								//勾选清除
								$('#tree').treeview('uncheckAll', {
									silent: true
								});
								//遍历所有节点
								var arr = $("#tree").treeview("getUnchecked");
								//角色关联菜单列表
								var menus = res.data;
								for (var i in arr) {
									for (var j in menus) {
										if (arr[i].id == menus[j]) {
											$('#tree').treeview('checkNode',
												[arr[i].nodeId, {
													silent: true
												}]);
										}
									}
								}
								//展示树
								$("#mymodal").modal("show");
							});
					},
					ok: function() {
						var arr = $("#tree").treeview("getChecked");
						var muids = '';
						for (var i in arr) {
							muids += arr[i].id + "#";
						}
						var url = "${root}/manage/rolemenu/updatemenu";
						var fd = new FormData();
						fd.append("rid", this.reid);
						fd.append("pids", muids);
						axios.post(url, fd).then(function(res) {
							alert(res.data.message);
							if (res.data.code == 200) {
								$("#mymodal").modal("hide");
							}
						});
					}
				},
				mounted: function() {
					var self = this;
					var url = "${root}/manage/menu/rolelist";
					axios.get(url).then(function(res) {
						if (res.data.code == "500") {
							alert(res.data.message);
							$("#app").hide();
						} else {
							self.roles = res.data;
						}
					});
				}
			})
		</script>
	</body>
</html>
